<template>
  <div class="search-result">
    <div class="search-content">
      <!-- 搜索相关股票列表 -->
      <el-card>
        <div class="Top">相关股票</div>
        <el-table :data="filteredStocks" style="width: 100%">
          <el-table-column prop="stockCode" label="股票代码" width="150" />
          <el-table-column prop="stockName" label="股票名称" width="200">
            <template #default="scope">
              <el-link type="primary" @click="viewStockDetail(scope.row.id)">{{ scope.row.stockName }}</el-link>
            </template>
          </el-table-column>
          <el-table-column prop="industry" label="所属行业" width="200" />
          <el-table-column label="操作" width="150">
            <template #default="scope">
              <el-button type="text" @click="viewStockDetail(scope.row.id)">查看股票详情</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="cu-ct-more" v-if="stockResults.length > 4">
          <div class="cuct-wrap" @click="showAllStock = !showAllStock">{{ showAllStock ? "收起" : "查看全部" }}</div>
        </div>
      </el-card>

    </div>
    <!-- 搜索相关新闻列表 -->
    <div class="journalism">
      <div class="Top">相关新闻</div>
      <div>
        <div class="importentList" v-for="(item, index) in journalistMessage" @click="goNewsDetail(item.id)"
          :key="index">
          <div style="width: 100%;">{{ item.title }} <text style="margin-left:20px;font-size:11px;color:#333333">{{
            item.publishDate }}</text></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getSearchNewsApi, getSearchStockApi } from '@/api/request'
import { onMounted, ref, watch, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()
// 股票信息列表
const stockResults = ref([])
// 新闻信息列表
const journalistMessage = ref([])
// 传入的搜索关键字
const keyword = ref(route.query.keyword)
// 是否显示全部股票
const showAllStock = ref(false)



// 模拟获取搜索结果
onMounted(() => { 
  getSearchNews()
  getSearchStock()
})



const getSearchNews = () => {
  getSearchNewsApi(keyword.value).then(res => {
    console.log(res);
    journalistMessage.value = res.records
  })
}


const getSearchStock = () => {
  getSearchStockApi(keyword.value).then(res => {
    stockResults.value = res
  })
}

// 监听路由参数 keyword 的变化
watch(() => route.query.keyword, (newKeyword) => {
  if (newKeyword) {
    keyword.value = newKeyword; 
    getSearchNews()
    getSearchStock()
  }
}, { immediate: true });


const filteredStocks = computed(() => {
  if (showAllStock.value) {
    return stockResults.value;
  } else {
    return stockResults.value.slice(0, 4);
  }
});

// 查看股票详情
const viewStockDetail = (id) => {
  router.push({
    path: "stockDetail",
    query: {
      stockId: id
    }
  })
}

// 跳转到新闻详情页
const goNewsDetail = (id) => {
  router.push({
    path: "journalismContent",
    query: {
      jourId: id
    }
  })
}


</script>

<style scoped>
.search-result {
  width: 80%;
  margin: 0 auto;
  padding: 20px;
  background-color: #f8f8f8;
  /* 浅灰色背景 */
}

h2 {
  margin-top: 20px;
  font-size: 18px;
  font-weight: bold;
}

.el-table {
  width: 100%;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* 添加黑色阴影 */
}

.journalism {
  margin-top: 20px;
  padding: 20px;
  background: white;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* 添加黑色阴影 */
}

.Top {
  border-left: 7px solid #3377ff;
  padding-left: 16px;
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 8px;
}

.classfiyNews {
  display: flex;
  border-top: 1px solid #b3acac;
  padding-top: 14px;
  margin-top: 12px;
}

.news_type {
  margin-left: 36px;
  line-height: 30px;
}

.tips {
  line-height: 30px;
  margin-left: 22px;
  margin-right: 15px;
}

.jourList {
  display: flex;
  font-size: 19px;
  border-bottom: 1px solid #b3acac;
  margin-top: 12px;
  padding-bottom: 8px;
}

.jourList div:nth-child(1) {
  width: 33%;
  margin-left: 12px;
}

.jourList div:nth-child(2) {
  width: 14%;
}

.jourList div:nth-child(3) {
  width: 51%;
}

.importentList {
  display: flex;
  margin-top: 16px;
  border-bottom: 1px solid #D3D3D3;
  padding-bottom: 16px;
  font-size: 14px;
  cursor: pointer;
}

.importentList div:nth-child(1) {
  width: 33%;
  margin-left: 12px;
}

.cu-ct-more {
  margin-top: 13px;

  text-align: center;
  font-family: Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  color: #154893;
}

.cuct-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  .cuct-wrap-icon {
    margin-left: 5px;
  }
}
</style>